<template>
  <div class="common-nav">
    <div
      class="nav-item"
      v-for="(item, index) in navList"
      :key="item.id"
      :class="{ active: index == currentIndex }"
      @click="changeNavItem(item, index)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  props: ['navList'],
  data() {
    return {
      currentIndex: 0,
    };
  },
  methods: {
    changeNavItem(item, index) {
      this.currentIndex = index;
      this.$router.push(item.path);
    },
  },
  created() {
    const navUrl = this.$route.path;
    this.navList.forEach((item, index) => {
      if (item.path === navUrl) {
        this.currentIndex = index;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.common-nav {
  display: flex;
  width: 100%;
  margin-bottom: 36px;
  .nav-item {
    position: relative;
    margin-right: 50px;
    color: #fff;
    cursor: pointer;
    transition: 0.2s color;
    &:hover {
      color: #1ecf9d;
    }
  }
  .nav-item.active {
    color: #1ecf9d;
  }
  .nav-item.active::after {
    content: '';
    position: absolute;
    top: 140%;
    left: 10%;
    width: 80%;
    height: 3px;
    background: #1ecf9d;
    border-radius: 999px;
  }
}
</style>
